<!-- 实验数据统计折线图-球磨机1 -->
<template>
  <div :id="id" :data="data" ref="id"></div>
</template>

<script>
export default {
  props: {
    id: { type: String },
    data: { type: Array },
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      let myChart = echarts.init(document.getElementById(this.id));
      var colors = [
        "#fe9800",
        "#23C2DB",
        "#D4EC59",
        "#FFE88E",
        "#FEB64D",
        "#dd2559",
        "#30cb13",
        "#cc45f4",
        "#5B6E96",
        "#a8dffa",
        "#62D9AD",
        "#5AAEF3",
        "#ffdc4c",
        "#FF974C",
        "#E65A56",
        "#6D61E4",
        "#4A6FE2",
        "#6D9AE7",
      ];

      let option = {
        title: {
          text: '球磨机1',
          rotate: 270,
          left: 'left'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: data.xAxisData
          }
        ],
        yAxis: [{type: 'value'}],
        series: [
          {
            name: 'EXAFS',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: data.seriesData
          }
        ]
      };

      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  },
};
</script>

<style scoped>
</style>
